<template>
  <el-row class="box_data">
    <div class="charts_data">
      <el-col class="charts_header" :class="{'current':isDanger}" :span="12">
        {{ title }}
      </el-col>
      <div class="box_bottom">
        <div :id="id" style="width: 88px;height: 88px"></div>
        <div class="box_bottom_right">
          <div class="right_word_data">
            <div>
              已整改<span class="number" :class="{'is_current':isDanger}">{{ finishData.already_num }}</span>
            </div>
            <div>
              未整改<span style="margin-left: 20px;">{{ finishData.noDo_num }}</span>
            </div>
          </div>
          <div class="correction_rate">
            <div>整改率
            </div>
            <div>{{ finishData.do_rate }}</div>
          </div>
        </div>
      </div>
    </div>
  </el-row>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "BoxData",
  data() {
    return {
    };
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    isDanger: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number
    },
    finishData: {
      type: Object
    }
  },
  computed: {
    isColor() {
      let color;
      if (this.isDanger) {
        color = [
          { offset: 0, color: "#FFEE9C" },
          { offset: 1, color: "#FFC860" }
        ];
      }else{
        color = [
          { offset: 0, color: "#FFA9AC" },
          { offset: 1, color: "#FF707B" }
        ];
      }
      return color;
    }
  },
  mounted() {
    this.echartsStart();
  },
  methods: {
    echartsStart() {
      let option = {
        title: {
          text: `总量 \n ${this.finishData.total}`,
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 14,
            fontWeight: 400
          }
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: this.finishData.already_num, name: "已完成",
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [
                      { offset: 0, color: "#8AA5FF" },
                      { offset: 1, color: "#5381FF" }
                    ]
                  )
                }
              },
              {
                value: this.finishData.noDo_num, name: "未完成",
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    this.isColor
                  )
                }
              }
            ]
          }
        ]
      };
      echarts.init(document.getElementById(`${this.id}`)).setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
.box_data {
  margin-bottom: 20px;
  margin-right: 20px;

  .charts_data {
    display: flex;
    flex-direction: column;
    .charts_header {
      width: 323px;
      height: 28px;
      line-height: 28px;
      background: linear-gradient(90deg, #FF6E79 0%, #FFB5B7 100%);
      border-radius: 6px 6px 0 0;
      text-align: center;
      color: #FFFFFF;
      font-size: 14px;
    }

    .box_bottom {
      display: flex;
      background-color: #FFF;
      height: 102px;
      border: 1px solid #E5EDF5;

      .box_bottom_right {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #3C4C70;

        .right_word_data {
          position: relative;
          width: 50%;
          display: flex;
          justify-content: space-between;
          flex-direction: column;

          &::after {
            position: absolute;
            content: "";
            width: 1px;
            height: 46px;
            background: #DCDEE2;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
          }

          .number {
            margin-left: 20px;
            color: #F4686D;
          }
        }

        .correction_rate {
          margin-right: 40px;
        }
      }
    }
  }
}

.current {
  background: linear-gradient(90deg, #FFC860 0%, #FFEE9C 100%) !important;
}

.is_current {
  color: #FFC961 !important;
}
</style>